<template>
  <div :class="{ 'texy-center': computedState.posotion }">
    <MaterialsHeader 
    :serialNum="serialNum" 
    :title="computedState.title" 
    :desc="computedState.desc"
    :titleSize="computedState.titleSize"
    :descSize="computedState.descSize"
    :titleWeight="computedState.titleWeight"
    :descWeight="computedState.descWeight"
    :titleItalic="computedState.titleItalic"
    :descItalic="computedState.descItalic"
    :titleColor="computedState.titleColor"
    :descColor="computedState.descColor"
    ></MaterialsHeader>
  </div>
  <div class="radio-group">
    <el-radio-group>
      <el-radio v-for="(item, index) in computedState.options" :key="index" :value="item">{{ item }}</el-radio>
    </el-radio-group>
  </div>
</template>
<script setup lang="ts">
import MaterialsHeader from '../../Common/MaterialsHeader.vue';
import type { OptionsStatus } from '../../../../types';
import { getTextStatus, getStringStatus, getCurrentStatus, getStringStatusByCurrentStatus } from '../../../../utils/index';
import { computed } from 'vue';

const props = defineProps<{
  serialNum: number,
  status: OptionsStatus
}>()

const computedState = computed(() => ({
  title: getTextStatus(props.status.title),
  desc: getTextStatus(props.status.desc),
  options: getStringStatus(props.status.options),
  posotion: getCurrentStatus(props.status.position),
  titleSize: getStringStatusByCurrentStatus(props.status.titleSize),
  descSize: getStringStatusByCurrentStatus(props.status.descSize),
  titleWeight: getCurrentStatus(props.status.titleWeight),
  descWeight: getCurrentStatus(props.status.descWeight),
  titleItalic: getCurrentStatus(props.status.titleItalic),
  descItalic: getCurrentStatus(props.status.descItalic),
  titleColor: getTextStatus(props.status.titleColor),
  descColor: getTextStatus(props.status.descColor),
}))
</script>
<style scoped lang="scss"></style>